import React, { useState } from 'react'
import './css/quan.scss'
import IconFont from './Tubiao';
import { useNavigate } from 'react-router-dom';
import { Sticky, Tabs, Cell, Image, Button } from 'react-vant';
export default function Quan() {
    const navigate = useNavigate()
    const [str1, setstr] = useState('未使用')
    const [quans, setquans] = useState([
        {
            id: 1,
            name: '未使用',
        },
        {
            id: 2,
            name: '已使用',
        },
        {
            id: 3,
            name: '已过期',
        },
    ])
    console.log(str1);
    return (
        <div className='div'>
            <Sticky>
                <div className='top'>
                    <span className='icon' onClick={() => (navigate('/app/my'))}>
                        <IconFont name='icon-arrowLeft'></IconFont>
                    </span>
                    <span>优惠券</span>
                </div>
            </Sticky>
            <div>
                <Tabs defaultActive={0} style={{ color: '#FF6262' }} type='line' color='#FF6262'>
                    <Tabs.TabPane title='未使用' >
                        <div style={{ color: 'black', width: '90%', height: '130px', margin: 'auto', backgroundColor: '#FFF0F0' }}>
                            <div style={{ fontSize: '25px', fontWeight: 'bold', margin: 'auto', marginTop: '20px' }}>￥{'10'}</div>
                            <div>新人专享优惠券  满五百可用</div>
                            <div><button style={{ backgroundColor: '#FF6262', color: '#FFF', border: 'none', borderRadius: '25px', width: '100px', height: '30px' }}>立即使用</button></div>
                            <div>有效期至{'2019.08.06'}</div>
                        </div>
                    </Tabs.TabPane>
                    <Tabs.TabPane title='已使用' >
                        <div style={{ color: 'black', width: '90%', height: '130px', margin: 'auto', backgroundColor: '#F2F2F2' }}>
                            <div style={{ fontSize: '25px', fontWeight: 'bold', margin: 'auto', marginTop: '20px' }}>￥{'10'}</div>
                            <div>新人专享优惠券  满五百可用</div>
                           
                            <div>有效期至{'2019.08.06'}</div>
                        </div>
                    </Tabs.TabPane>
                    <Tabs.TabPane title='已过期' >
                        <div style={{ color: 'black', width: '90%', height: '130px', margin: 'auto', backgroundColor: '#F2F2F2' }}>
                            <div style={{ fontSize: '25px', fontWeight: 'bold', margin: 'auto', marginTop: '20px' }}>￥{'10'}</div>
                            <div>新人专享优惠券  满五百可用</div>
                            <div>有效期至{'2019.08.06'}</div>
                        </div>
                    </Tabs.TabPane>
                </Tabs> 
            </div>
        </div>
    )
}